<template>
  <div>
    <router-link to="/Find">发现音乐</router-link> |
    <router-link to="/My">我的音乐</router-link> 
    <!-- 7、设置路由挂载点 -->
    <router-view></router-view>
    <!-- 
      声明式导航提供了两个类名的区别
      1、router-link-exact-active: 精确匹配：当url地址栏上的路径和href属性的值完全相同的时候，设置此类名
      2、router-link-active: 模糊匹配，当URL地址栏上的路径包含href属性的值的时候，设置此类名

      使用场景：
       一般情况：router-link-exact-active用来设置二级导航的高亮效果
       一般情况：router-link-active用来设置一级导航的高亮效果

     -->
  </div>
</template>

<script>
export default {

}
</script>

<style>
.router-link-active{
  color: red;
  font-weight: bold;
}
.router-link-exact-active{
  color: skyblue;
}
</style>